import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:kongqi/global.dart';
import 'package:flutter/material.dart';
import 'package:kongqi/http/api.dart';
import 'package:kongqi/page/detail.dart';

class SortPage extends StatefulWidget {
  SortPage({Key key}) : super(key: key);
  @override
  _SortPageState createState() => _SortPageState();
}

class _SortPageState extends State<SortPage> {
  List list = [];
  String sort = '';
  @override
  void initState() {
    getKongQiListBySort(sort);
    super.initState();
  }

  getKongQiListBySort(_sort) {
    EasyLoading.show();
    getKongQiList(_sort).then((res) {
      EasyLoading.dismiss();
      setState(() {
        sort = _sort;
        list = res['result'];
      });
    });
  }

  Color getTextColor(text) {
    switch (text) {
      case '优':
        return Color(0xFF79b800);
        break;
      case '良':
        return Color(0xFFffbb17);
        break;
      case '轻度':
        return Color(0xFFc67901);
        break;
      case '中度':
        return Color(0xFFeb111b);
        break;
      case '重度':
        return Color(0xFFb3065b);
        break;
      case '严重':
        return Color(0xFF83031B);
        break;
      default:
    }
  }

  List<Widget> renderResou(items) {
    List<Widget> list = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailPage(
                  id: item['id'],
                ),
              ),
            );
          },
          child: Container(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
            decoration: BoxDecoration(),
            child: Row(
              children: [
                Expanded(
                  child: Center(
                    child: Text(
                      item['sort'],
                      style: TextStyle(
                        color: Global.fontColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      item['city'],
                      style: TextStyle(
                        color: Global.fontColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      item['provinces'],
                      style: TextStyle(
                        color: Global.fontColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      item['index'],
                      style: TextStyle(
                        color: Global.fontColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text(
                          item['level'],
                          style: TextStyle(
                            color: getTextColor(item['level']),
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                        Text(
                          '[详情]',
                          style: TextStyle(
                            color: Global.primaryColor,
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                            decoration: TextDecoration.underline,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(),
      child: Column(
        children: [
          Container(
            height: Global.paddingTop + 10,
            decoration: BoxDecoration(color: Global.primaryColor),
          ),
          Container(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
            decoration: BoxDecoration(color: Global.primaryColor),
            child: Row(
              children: [
                Expanded(
                  child: Center(
                    child: Text(
                      '排名',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      '城市',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      '省份',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: InkWell(
                    onTap: () {
                      // var _sort = sort == '' ? 'desc' : '';
                      // getKongQiListBySort(_sort);
                    },
                    child: Center(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '指数',
                            style: TextStyle(
                              color: Global.backgroundColor,
                              fontSize: 12,
                              fontWeight: FontWeight.w600,
                            ),
                          ),
                          // Icon(
                          //   sort == ''
                          //       ? Icons.trending_up
                          //       : Icons.trending_down,
                          //   color: Global.backgroundColor,
                          //   size: 15,
                          // )
                        ],
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Text(
                      '空气质量',
                      style: TextStyle(
                        color: Global.backgroundColor,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: renderResou(list),
              ),
            ),
          )
        ],
      ),
    );
  }
}
